<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="keywords" content="博客,个人博客,ttzxh个人博客,前端" />
    <meta name="description" content="ttzxh个人博客旨在分享前端技术和各类视屏" />
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <style>
    #app {
      background-size: cover;
      background-position: right;
      /* min-width: 1000px; */
    }
    #outlogo {
      width: 100vw;
      height: 100vh;
      position: absolute;
      z-index: 9999999999;
      margin: 0;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to bottom, #2980b9, #6dd5fa, #ffffff);
      transition: all 0.5s;
      /* color: #fff; */
    }
    .bottom-line {
      animation: fadeIn 0.4s linear infinite alternate-reverse;
    }
    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    .introduce--blog {
      text-align: center;
      margin-top: 100px;
      font-size: 22px;
      color: #2980b9;
      letter-spacing: 2px;
    }
    .animate {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .base {
      height: 9em;
      left: 50%;
      margin: -7.5em;
      padding: 3em;
      position: absolute;
      top: 15%;
      width: 9em;
      transform: rotateX(45deg) rotateZ(45deg);
      transform-style: preserve-3d;
    }

    .cube,
    .cube:after,
    .cube:before {
      content: '';
      float: left;
      height: 3em;
      position: absolute;
      width: 3em;
    }

    /* Top */
    .cube {
      background-color: #05afd1;
      position: relative;
      transform: translateZ(3em);
      transform-style: preserve-3d;
      transition: 0.25s;
      box-shadow: 13em 13em 1.5em rgba(0, 0, 0, 0.1);
      animation: anim 1s infinite;
    }

    .cube:after {
      background-color: #049dbc;
      transform: rotateX(-90deg) translateY(3em);
      transform-origin: 100% 100%;
    }

    .cube:before {
      background-color: #048ca7;
      transform: rotateY(90deg) translateX(3em);
      transform-origin: 100% 0;
    }

    .cube:nth-child(1) {
      animation-delay: 0.05s;
    }

    .cube:nth-child(2) {
      animation-delay: 0.1s;
    }

    .cube:nth-child(3) {
      animation-delay: 0.15s;
    }

    .cube:nth-child(4) {
      animation-delay: 0.2s;
    }

    .cube:nth-child(5) {
      animation-delay: 0.25s;
    }

    .cube:nth-child(6) {
      animation-delay: 0.3s;
    }

    .cube:nth-child(7) {
      animation-delay: 0.35s;
    }

    .cube:nth-child(8) {
      animation-delay: 0.4s;
    }

    .cube:nth-child(9) {
      animation-delay: 0.45s;
    }

    @keyframes anim {
      50% {
        transform: translateZ(0.5em);
      }
    }

    .loading span {
      font-family: Averia Sans Libre, Fantasy;
      text-transform: uppercase;
      font-size: 42px;
      font-weight: 600;
      opacity: 0;
      display: inline-block;
      padding: 0px 20px;
      color: #fff;
      animation: letterWave 2s infinite linear;
    }

    .loading span:nth-child(0) {
      animation-delay: 0ms;
    }

    .loading span:nth-child(1) {
      animation-delay: 250ms;
    }

    .loading span:nth-child(2) {
      animation-delay: 500ms;
    }

    .loading span:nth-child(3) {
      animation-delay: 750ms;
    }

    .loading span:nth-child(4) {
      animation-delay: 1000ms;
    }

    .loading span:nth-child(5) {
      animation-delay: 1250ms;
    }

    .loading span:nth-child(6) {
      animation-delay: 1500ms;
    }

    .loading span:nth-child(7) {
      animation-delay: 1750ms;
    }

    .loading span:nth-child(8) {
      animation-delay: 2000ms;
    }

    .loading span:nth-child(9) {
      animation-delay: 2250ms;
    }

    .loading span:nth-child(10) {
      animation-delay: 2500ms;
    }

    @keyframes letterWave {
      0%,
      100% {
        transform: translateY(0) scale(1);
        padding: 0 20px;
        opacity: 0.8;
      }

      25% {
        transform: translateY(-50px) scale(0.8);
        padding: 0 0px;
        opacity: 0.6;
      }

      75% {
        transform: translateY(50px) scale(1.5);
        padding: 0px 40px;
        opacity: 1;
      }
    }
  </style>

  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="outlogo">
      <div class="animate">
        <div class="base">
          <div class="cube"></div>
          <div class="cube"></div>
          <div class="cube"></div>
          <div class="cube"></div>
          <div class="cube"></div>
          <div class="cube"></div>
          <div class="cube"></div>
          <div class="cube"></div>
          <div class="cube"></div>
        </div>
        <div>
          <div class="loading">
            <span>l</span>
            <span>o</span>
            <span>a</span>
            <span>d</span>
            <span>i</span>
            <span>n</span>
            <span>g</span>
            <span>.</span>
            <span>.</span>
            <span>.</span>
          </div>
          <div class="introduce--blog">欢迎来到ttzxh的博客<span class="bottom-line">_</span></div>
        </div>
      </div>
    </div>

    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.runtime.global.min.js"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vuex/4.0.2/vuex.global.prod.min.js"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/4.0.13/vue-router.global.prod.min.js"></script>

    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-w/axios/0.26.0/axios.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-w/video.js/7.15.4/alt/video.core.min.js"></script>
    <link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-w/video.js/7.15.4/alt/video-js-cdn.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/styles/agate.min.css" />
    <!-- <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-w/echarts/5.3.0/echarts.min.js"></script> -->

    <!-- <script src="https://cdn.staticfile.org/vue/3.2.47/vue.global.prod.min.js"></script> -->
    <!-- <script src="https://cdn.staticfile.org/vue/3.2.47/vue.global.min.js"></script>
    <script src="https://cdn.staticfile.org/vuex/4.1.0/vuex.global.prod.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/4.1.6/vue-router.global.prod.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/1.3.4/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/video.js/8.1.1/alt/video-js-cdn.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/11.7.0/styles/vs2015.min.css" />
    <script src="https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"></script> -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/live2d-vue3@0.2.0/dist/live2d-vue3.css" />
    <script src="https://unpkg.com/live2d-vue3@0.2.0/dist/live2d-vue3.umd.min.js"></script> -->

    <div id="app"></div>
    <div id="global"></div>
    <div id="tooltip"></div>

    <script>
      let appDom = document.querySelector('#app')
      let img = new Image()
      img.src = 'https://www.ttzxh.icu/api/static/bg/bg.webp'
      img.onload = function() {
        appDom.style.backgroundImage = 'url("https://www.ttzxh.icu/api/static/bg/bg.webp")'
        // appDom.style.backgroundImage = 'url("./6dfe2141c852f960927b4eec2d7fb6461662087317542.jpeg")'

        setTimeout(function() {
          document.querySelector('#outlogo').style.opacity = 0
          document.querySelector('#outlogo').style.transform = 'scale(0.4)'
        }, 100)
        setTimeout(function() {
          document.querySelector('#outlogo').style.display = 'none'
        }, 600)
      }
    </script>

    <div id="weather" style="position: absolute;top: 100px; right: 17px;opacity: 0.7;">
      <div id="he-plugin-standard"></div>
      <div style="display: none;"></div>
    </div>
    <!-- built files will be auto injected -->
  </body>
  <script>
    // window.addEventListener('error', function() {
    //   return
    // })
    // window.addEventListener('load', function() {
    //   setTimeout(function() {
    //     document.querySelector('#outlogo').style.opacity = 0
    //     document.querySelector('#outlogo').style.transform = 'scale(0.2)'
    //   }, 100)
    //   setTimeout(function() {
    //     document.querySelector('#outlogo').style.display = 'none'
    //   }, 600)
    // })
  </script>
  <script>
    WIDGET = {
      CONFIG: {
        layout: '2',
        width: 220,
        height: 270,
        background: '1',
        dataColor: 'FFFFFF',
        key: '7e2556cf5b0c4d7b8d189d2f85a9b2d0'
      }
    }
    // document.querySelector('#logo').style.display = 'none'
  </script>
  <!-- <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-w/highlight.js/11.3.1/highlight.min.js"></script> -->
  <script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>
</html>
